<template>
  <div>
    <div id="head">
      <van-icon class="biao" size="25px" @click="toShou()" name="arrow-left" />
      能耗统计
    </div>
    <div id="xuan">
      <van-button
          v-for="(item, index) in buttons"
          :key="index"
          :type="activeIndex === index? 'info' : 'default'"
          @click="handleClick(index)"
          v-model="form.energyType">
        {{item}}
      </van-button>
    </div>
    <div>
      <div id="form">
        <span style="font-size: 15px;padding-left: 18px;padding-right: 18px">选择设备:</span>
        <van-dropdown-menu style="width: 250px;position: absolute;top: 110px;right: 20px;">
          <van-dropdown-item v-model="form.deviceId" :options="regionOptions" @change="findDevice" />
        </van-dropdown-menu>
      </div>
      <van-field
          label="设备编号："
          placeholder="请输入设备编号"
          :value="one.deviceCode"
      />
      <van-field
          label="设备位置："
          placeholder="请输入设备位置"
          :value="one.deviceAddress"
      />
      <van-field
          label="设备分类："
          placeholder="请输入设备分类"
          :value="one.deviceType"
      />
    </div>
    <div id="daily">
      <van-button
          v-for="(item, index) in buttons2"
          :key="index"
          :type="activeIndex2 === index? 'info' : 'default'"
          @click="findByTime(index)"
          v-model="form.timeType">
        {{item}}
      </van-button>
    </div>
    <div id="zhu" ref="chars" style="height: 500px;width:100%;"></div>
  </div>
</template>

<script>
import axios from "axios";
import * as echarts from 'echarts'
export default {
  data(){
    return{
      form:{
        deviceEnergy:"电",
        timeType:"日",
      },
      device:[],
      one:{},
      joints:['0时', '1时', '2时', '3时', '4时', '5时', '6时', '7时', '8时', '9时', '10时', '11时', '12时', '13时', '14时', '15时', '16时', '17时', '18时', '19时', '20时', '21时', '22时', '23时'],
      usage:[100, 120, 80, 50, 90, 140, 30, 20, 110, 130, 146, 120, 90, 70, 100, 130, 150, 120, 100, 80, 90, 110, 130, 120],
      buttons: ['电', '水', '燃气'],
      buttons2: ['日', '月', '年'],
      activeIndex: 0,
      activeIndex2:0,
      regionOptions: [
        { text: '1F2#电表', value: 1 },
        { text: '1F3#电表', value: 2 },
        { text: '1F4#电表', value: 3 },
      ]
    }
  },
  methods:{
    handleClick(index) {
      this.activeIndex = index;
      this.form.deviceEnergy = this.buttons[index];
      this.findUsage();
      this.findJoint();
      this.showImg();
    },
    findByTime(index){
      this.activeIndex2 = index;
      this.form.timeType = this.buttons2[index];
      this.findUsage();
      this.findJoint();
      this.showImg();
    },
    showImg(){
      const myChart = echarts.init(this.$refs.chars);
      const option={
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '10%',
          right: '10%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'value',
          }
        ],
        yAxis: [
          {
            type: 'category',
            data: this.joints,
          },
        ],
        series: [
          {
            name: '耗能',
            type: 'bar',
            data: this.usage,
          }
        ]
      }
      myChart.setOption(option)
    },
    findUsage(){
      axios.post("http://localhost:9999/daily/findUsage",this.form).then(res=>{
        this.usage = [];
        this.usage = res.data;
        this.showImg();
      })
    },
    findJoint(){
      axios.post("http://localhost:9999/daily/findJoint",this.form).then(res=>{
        this.joints = [];
        this.joints = res.data;
        this.showImg();
      })
    },
    findDaily(){
      axios.post("http://localhost:9999/daily/findAll",this.form).then(res=>{
      })
    },
    findDevice(){
      const id = this.form.deviceId;
      axios.post("http://localhost:9999/device/getOne?id="+id).then(res=>{
        this.one = res.data;
        this.findJoint();
        this.findUsage();
        this.showImg();
      })
    },
    findAll(){
      axios.post("http://localhost:9999/device/findAll").then(res=>{
        this.device=res.data
      })
    },
    toShou(){
      this.$router.push('/medical')
    }
  },
  created(){
    this.findAll();
  },
}
</script>
<style scoped>
#daily{
  width: 100%;
  float: left;
  display: flex;
  justify-content: right;
}
#form{
  float: left;
  margin-top: 80px;
}
#zhu{
  float: left;
}
#head{
  background-color: #f5f5f5;
  height: 30px;
  width: 100%;
  padding-top: 10px;
  padding-bottom: 10px;
  text-align: center;
  font-size: 16px;
  font-weight: bold;
  float: left;
  margin-bottom: 0px;
}
.biao{
  float: left;
}
#xuan{
  width: 100%;
  height: 40px;
  position: absolute;
  top: 60px;
  left: 10px;
  margin-bottom: 30px;
}
</style>
